<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list">
        <!-- <li>
          <input type="checkbox" checked="false" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li> -->
      </ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
        <a href="javascript:;" id="remove">删除</a>
        <input type="text" id="newInfo" />
        <a href="javascript:;" id="add">添加</a>
      </footer>
    </section>
    <script>
      // 1.模板字符串 2.箭头函数 ：（1.带有return的函数；2.this的问题）

      // 对象数组
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: true,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: false,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: true,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: true,
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];
      // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
      // 5.收藏和取消收藏功能

      // 数据驱动 ，数据优先；  删除 、添加 、筛选 ....----》数据的操作 （解耦）;
      // 数据处理 和 视图操作  分开
      // 1.增删改查 都只操作数据  2. 数据处理好后在来修改 dom

      var ulEle = document.querySelector("#list");
      function renderData(rData) {
        ulEle.innerHTML = "";
        // 根据数据来显示对应的dom结构
        rData.forEach(function (item) {
          console.log("这个就是每一个对象的内容", item);

          var liEle = document.createElement("li");

          liEle.innerHTML = `${
            item.checked
              ? ' <input type="checkbox" checked class="check"  />'
              : ' <input type="checkbox" class="check" />'
          }
          <span> ${item.title} </span> 
          ${
            item.collect
              ? ' <a href="javascript:;" class="cancelCollect">取消收藏</a> '
              : ' <a href="javascript:;" class="collect">收藏</a> '
          } <a href="javascript:;" class="remove">删除</a>`;

          ulEle.appendChild(liEle);
        });
        addEvent();
      }

      renderData(data); //生成dom

      function addEvent() {
        var lis = document.querySelectorAll("li");
        lis.forEach(function (li, key) {
          li.onclick = function (e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            switch (target.className) {
              case "check":
                data[key].checked = !data[key].checked;
                var checkAllJudge = isCheckAll();
                document.querySelector("#checkAll").checked = checkAllJudge;
                break;
              case "remove":
                data.splice(key, 1);

                renderData(data);
                break;
              case "collect":
                data[key].collect = true;
                renderData(data);
                break;
              case "cancelCollect":
                data[key].collect = false;
                renderData(data);
                break;
            }
          };
        });
      }
      addEvent();

      var checkAllEle = document.querySelector("#checkAll");
      checkAllEle.onclick = function () {
        // console.log(this.checked);

        data.forEach((item) => {
          // console.log(this);
          item.checked = this.checked;
        });
        // console.log(data);

        renderData(data);
      };

      let isCheckAll = () => data.every((item) => item.checked);

      var dleAllEle = document.querySelector("#remove");
      dleAllEle.onclick = function () {
        var newData = data.filter((item) => !item.checked);

        // console.log(data);
        data = newData;
        renderData(newData);
      };

      var addEle = document.querySelector("#add");
      addEle.onclick = function () {
        var title = document.querySelector("#newInfo").value;
        var obj = {
          id: data[data.length - 1].id + 1,
          title,
          checked: false,
          collect: false,
        };
        data.push(obj);
        renderData(data);
      };
    </script>
  </body>
</html>
